<template>
	<view class="record_ns">
		<view class="ns_time">
			<text :class="currentNav == 0? 'chrrent_time':''" @click="changeDataNav(0)">月</text>
			<text :class="currentNav == 1? 'chrrent_time':''" @click="changeDataNav(1)">年</text>

			<image @click="goToRecordnsList" class="ns_menuimg" :src="require('../status/image/mun.png')" mode=""></image>
		</view>
		<view class="nx_change_time" @click="selectDatePicker">
			<image :src="require('../status/image/zuojiantou.png')" mode="" @click="reduceTime"></image>
			<text v-if="currentNav == 1">{{yearTime}} 年 </text>
			<text v-else>{{yearTime}} 年 {{monthTiem}}月 </text>

			<image :src="require('../status/image/youjiantou.png')" mode="" @click="increaseTime"></image>
		</view>
		<view class="nx_change_tubiao">
			<view class="tubiao">
				<view class="qiun-columns">
					<view class="qiun-charts">
						<canvas 
						disable-scroll=true 
						@touchstart="touchColumn" 
						 @touchmove="moveMix" 
						 canvas-id="canvasLineA"
						 id="canvasLineA" class="charts"></canvas>
					</view>
				</view>
			</view>
			<view class="nx_info" v-if="newUa.value">
				<text>尿酸值: <text style="font-size: 36rpx;margin-left: 10rpx;">{{newUa.value}}</text> umol/L </text>
				<text style="display: block;">{{newUa.time}}</text>
			</view>
			<view class="nx_btn" @click="addRecordns">添加尿酸记录</view>
		</view>

		<date-time-picker ref='dateTime' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange'></date-time-picker>
	</view>
</template>

<script>
	import uCharts from '../compon/u-charts/u-charts.js';
	let canvaColumn = null;
	export default {
		data() {
			return {
				// 添加尿酸时间
				yearTime: null,
				monthTiem: null,
				currentNav: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// 时间选择格式
				type: 'date',
				// 最近一次的尿酸记录
				newUa: null,
				// 图表最大值
				maxNum: null,
				
				chartData: {
					categories: ['1-1', '1-5', '1-9', '1-13', '1-17', '1-21', '1-25', '1-29'],
					"series": [{
						"name": "曲面",
						"data": [],
						"type": "area",
						"style": "curve",
						"color": "#02cf98"
					} ]
				},
				// 新数据
				newChartData: {}
			};
		},
		onShow() {
			this.getNowFormatDate()
			this.getNewUa();
			this.getGlucoseList(null, this.yearTime + '-' + this.monthTiem)
			// 如果没有新数据 展示初始数据
			if (!this.newChartData.categories) {
				this.getServerData(this.chartData)
			}
		},
		methods: {
			// 时间转换
			getNowFormatDate() {
				let date = new Date();
				let seperator1 = "-";
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let strDate = date.getDate();  
				this.yearTime = year 
				this.monthTiem = month  
			},
			touchColumn(e) {
				canvaColumn.scrollStart(e);
				canvaColumn.showToolTip(e, {
					format: (item, category) => { 
						 if(!this.currentNav){
							 return category.split('-')[1] + '日' + ' ' + ': ' + item.data + '(umol/L)'
						 }else{
							 return category + ' ' + ':' + item.data.value + '(umol/L)'
						 } 
						 
					}
				});
			},
			addRecordns() {
				uni.navigateTo({
					url: 'addrecordns/index?time=' + this.addTime
				})
			},
			getServerData(chartData) {
				this.showLineA("canvasLineA", chartData);
			},
			showLineA(canvasId, chartData) {
				let _this = this
				canvaColumn = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: 360,
					height: 240,
					enableScroll: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						disableGrid: false,
						itemCount: 12,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						// splitNumber: 6,
						min: 0,
						max: _this.maxNum,
						disableGrid: false
					},
					extra: {}
				});
			},
			// 年月切换
			changeDataNav(index) {
				this.currentNav = index
				if (index == 1) {
					this.yearTime = 2021
					this.getGlucoseList(this.yearTime)
				} else {
					this.yearTime = 2021
					this.monthTiem = 1
					this.getGlucoseList(null, this.yearTime + '-' + this.monthTiem)
				}
			},
			// 选择时间
			selectDatePicker() {
				// this.$refs.dateTime.show();
			},
			// 确认选择时间
			dateTimeChange(value) {
				this.addTime = value.replace(/(\d*)-(\d*)-(\d*)/g, '$1年$2月$3日')
			},
			// 添加时间
			increaseTime() {
				// 年份
				if (this.currentNav == 1) {
					let newTime = this.yearTime += 1
					this.yearTime = newTime
					this.getGlucoseList(this.yearTime)
				} else {
					if (this.monthTiem == 12) {
						this.monthTiem = 1
						this.yearTime += 1
					} else {
						this.monthTiem += 1
					}
					this.getGlucoseList(null, this.yearTime + '-' + this.monthTiem)
				}
			},
			// 减少时间
			reduceTime() {
				if (this.currentNav == 1) {
					let newTime = this.yearTime -= 1
					this.yearTime = newTime
					this.getGlucoseList(this.yearTime)
				} else {
					if (this.monthTiem == 1) {
						this.monthTiem = 12
						this.yearTime -= 1
					} else {
						this.monthTiem -= 1
					}
					this.getGlucoseList(null, this.yearTime + '-' + this.monthTiem)
				}
			},
			// 前往尿酸列表
			goToRecordnsList() {
				uni.navigateTo({
					url: '/page/recordns/statisticsns/index' 
				}) 
			},
			// 获取最近记录
			getNewUa() {
				this.$api.sendRequest({
					url: '/api/ua/getNewUa',
					success: res => {
						if (res.code >= 0) {
							this.newUa = res.data
						}
					}
				})
			},
			// 获取列表
			getGlucoseList(year = '', month = '') {
				if (year) {
					this.$api.sendRequest({
						url: 'api/ua/uaList',
						data: {
							year
						},
						success: res => {
							if (res.code >= 0) {
								if (res.data) { 
									let newData = []
									let newDatas = []
									for (let key in res.data) {
										newDatas.push(parseInt(res.data[key]))
										newData.push({
											value: parseInt(res.data[key]),
											time: key
										})
									}
									this.maxNum = Math.max(...newDatas) + 100 
									this.newChartData = {
										categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
										"series": [{
											"name": "曲面",
											"data": newData,
											"type": "area",
											"style": "curve",
											"color": "#02cf98"
										} ]
									}
									this.getServerData(this.newChartData);
								} else {
									this.getServerData(this.chartData);
								}
							}
						}
					})
				}
				if (month) {
					this.$api.sendRequest({
						url: 'api/ua/uaList',
						data: {
							month
						},
						success: res => {
							if (res.code >= 0) {
								if (res.data.length > 0) { 
									this.maxNum = Math.max(...res.data[1]) + 100
									this.newChartData = {
										categories: res.data[0],
										"series": [{
											"name": "曲面",
											"data": res.data[1],
											"type": "area",
											"style": "curve",
											"color": "#02cf98"
										} ]
									}
								} else {
									this.newChartData = {
										categories: [this.monthTiem + '-1', this.monthTiem + '-5', this.monthTiem + '-9', this.monthTiem + '-13',
											this.monthTiem + '-17', this.monthTiem + '-21', this.monthTiem + '-25', this.monthTiem + '-29'
										],
										"series": [{
											"name": "曲面",
											"data": [],
											"type": "area",
											"style": "curve",
											"color": "#02cf98"
										} ]
									}
								}
								this.getServerData(this.newChartData);
							}
						}
					})
				}
			}, 
			moveMix(e) {
				canvaColumn.scroll(e);
			},
			toJSON() {
				return this
			}
		}
	}
</script>

<style lang="less">
	.record_ns {
		background-color: #fff;
		height: 100%;

		.ns_time {
			display: flex;
			margin: 20rpx auto;
			height: 70rpx;
			line-height: 70rpx;
			width: 480rpx;
			font-size: 32rpx;
			border: 2rpx solid #01cc97;
			border-radius: 20rpx;

			text {
				flex: 1;
				text-align: center;
				border-radius: 20rpx 0 0 20rpx;
			}

			& text:nth-child(2) {
				border-radius: 0 20rpx 20rpx 0;
			}

			.chrrent_time {
				color: #fff;
				background-color: #03ce99;
			}

			.ns_menuimg {
				position: absolute;
				right: 60rpx;
				top: 34rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}

		.nx_change_time {
			margin: 0 auto;
			width: 400rpx;
			display: flex;
			justify-content: space-between;
			font-size: 34rpx;
			image {
				margin: auto 0;
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
			}
		}

		.nx_change_tubiao {
			padding: 0 20rpx;
			margin: 20rpx 0;

			.tubiao {
				height: 480rpx;
			}

			.nx_info {
				margin: 40rpx 0;

			}

			.nx_btn {
				margin: 120rpx 40rpx 20rpx 40rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fff;
				font-weight: 700;
				font-size: 36rpx;
				background-color: #02cf98;
				border-radius: 20rpx;
				letter-spacing: 4rpx;
			}
		}

		.qiun-charts {
			width: 700rpx;
			height: 600rpx;

			.charts {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
